import { Radio, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

import Tabs, { TabsProps } from '@/components/Tabs';

import { getDeviceCascader } from '@/utils/formatterTree';
import { useIntl, useModel } from '@umijs/max';
import Chart from './component/Chart';
import List, { ToolBarRender } from './component/List';

const Index: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const listRef = useRef<{ download: () => void }>();
  const [deviceTree, setDeviceTree] = useState();
  const [showType, setShowType] = useState('2');
  const intl = useIntl();
  useEffect(() => {
    if (initialState?.isArea) {
      getDeviceCascader(false, 2, 'AREA').then((res) => {
        setDeviceTree(res[0].subDevices);
      });
    }
  }, []);
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({
        id: 'statistics.analyze.title',
      }),
      children:
        showType === '1' ? (
          <List ref={listRef} deviceTree={deviceTree} />
        ) : (
          <Chart deviceTree={deviceTree} />
        ),
    },
  ];

  return (
    <Tabs
      items={items}
      destroyInactiveTabPane={true}
      tabBarExtraContent={
        <Space>
          <Radio.Group
            value={showType}
            buttonStyle="solid"
            onChange={(event) => {
              setShowType(event?.target.value);
            }}
            className="global-group-radio-button"
          >
            <Radio.Button value="1">
              {intl.formatMessage({
                id: 'statistics.common.list',
              })}
            </Radio.Button>
            <Radio.Button value="2">
              {intl.formatMessage({
                id: 'statistics.common.chart',
              })}
            </Radio.Button>
          </Radio.Group>
          {showType === '1' && <ToolBarRender tableRef={listRef} />}
        </Space>
      }
    />
  );
};
export default Index;
